<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏日海边度假记录 - 相册详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --light: #f3f4f6;
            --dark: #1f2937;
            --gray: #6b7280;
            --light-gray: #e5e7eb;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f9fafb;
            color: var(--dark);
            line-height: 1.6;
            padding-top: 30px;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .album-header {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .album-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .album-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        .album-author {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            display: flex;
            flex-direction: column;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .author-joined {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .album-description {
            color: var(--dark);
            line-height: 1.7;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .album-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .album-tag {
            background-color: var(--light);
            font-size: 0.9rem;
            padding: 5px 12px;
            border-radius: 20px;
            color: var(--gray);
        }
        
        .album-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.95rem;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-outline {
            background-color: white;
            color: var(--gray);
            border: 1px solid var(--light-gray);
        }
        
        .btn-outline:hover {
            background-color: var(--light);
        }
        
        /* 图片网格 */
        .photos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 15px;
            margin-bottom: 40px;
        }
        
        .photo-item {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            aspect-ratio: 1/1;
        }
        
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .photo-item:hover img {
            transform: scale(1.05);
        }
        
        .photo-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
            padding: 15px 10px 10px;
            font-size: 0.9rem;
            opacity: 0;
            transition: var(--transition);
        }
        
        .photo-item:hover .photo-caption {
            opacity: 1;
        }
        
        /* 全屏图片查看器 */
        .fullscreen-viewer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.95);
            z-index: 1050;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .fullscreen-viewer.active {
            display: flex;
        }
        
        .viewer-content {
            position: relative;
            max-width: 100%;
            max-height: 90vh;
        }
        
        .fullscreen-image {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
        }
        
        .viewer-caption {
            color: white;
            text-align: center;
            margin-top: 15px;
            font-size: 1.1rem;
        }
        
        .viewer-close {
            position: absolute;
            top: -40px;
            right: -40px;
            color: white;
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .viewer-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }
        
        .nav-btn {
            color: white;
            background: rgba(0, 0, 0, 0.3);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background: rgba(0, 0, 0, 0.6);
        }
        
        /* 评论区 */
        .comments-section {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-bottom: 40px;
        }
        
        .section-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .comment-form {
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .comment-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--light-gray);
            border-radius: 8px;
            font-size: 1rem;
            resize: none;
            transition: var(--transition);
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        .submit-comment {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 20px;
            font-size: 0.95rem;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .submit-comment:hover {
            background-color: var(--primary-dark);
        }
        
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .comment-item {
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .comment-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-author {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--gray);
            margin-left: auto;
        }
        
        .comment-content {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 0.85rem;
        }
        
        .comment-action {
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        .replies-list {
            margin-top: 15px;
            margin-left: 50px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .reply-item {
            padding: 10px;
            background-color: var(--light);
            border-radius: 6px;
        }
        
        .reply-form {
            margin-top: 10px;
            display: none;
        }
        
        .reply-form.active {
            display: block;
        }
        
        @media (max-width: 768px) {
            .photos-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .album-meta {
                flex-direction: column;
                gap: 10px;
            }
            
            .viewer-nav {
                pointer-events: none;
            }
            
            .nav-btn {
                pointer-events: auto;
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            .viewer-close {
                right: 0;
                top: -30px;
            }
            
            .replies-list {
                margin-left: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 相册头部信息 -->
        <div class="album-header">
            <h1 class="album-title">夏日海边度假记录</h1>
            
            <div class="album-meta">
                <div class="meta-item">
                    <i class="far fa-calendar-alt"></i>
                    <span>发布于 2023年7月15日</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-image"></i>
                    <span>8 张照片</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-eye"></i>
                    <span>1.2k 浏览</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-heart"></i>
                    <span>245 点赞</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-comment"></i>
                    <span>32 条评论</span>
                </div>
            </div>
            
            <div class="album-author">
                <img src="https://picsum.photos/id/64/200/200" alt="陈明的头像" class="author-avatar">
                <div class="author-info">
                    <span class="author-name">陈明</span>
                    <span class="author-joined">加入于 2021年3月</span>
                </div>
                <button class="action-btn btn-outline ms-auto">
                    <i class="far fa-user-plus"></i> 关注
                </button>
            </div>
            
            <div class="album-description">
                <p>这个夏天和家人一起去海边度假的美好回忆，阳光、沙滩和海浪。记录了从日出到日落的美丽海景，还有孩子们在沙滩上玩耍的欢乐瞬间。海水清澈见底，天空湛蓝如宝石，每一张照片都承载着难忘的时光。</p>
            </div>
            
            <div class="album-tags">
                <span class="album-tag">#旅行</span>
                <span class="album-tag">#海滩</span>
                <span class="album-tag">#夏天</span>
                <span class="album-tag">#家庭</span>
                <span class="album-tag">#日出</span>
                <span class="album-tag">#日落</span>
            </div>
            
            <div class="album-actions">
                <button class="action-btn btn-primary like-btn">
                    <i class="far fa-heart"></i> 点赞
                </button>
                <button class="action-btn btn-outline bookmark-btn">
                    <i class="far fa-bookmark"></i> 收藏
                </button>
                <button class="action-btn btn-outline share-btn">
                    <i class="far fa-share-alt"></i> 分享
                </button>
                <button class="action-btn btn-outline download-btn">
                    <i class="fas fa-download"></i> 下载全部
                </button>
            </div>
        </div>
        
        <!-- 相册图片网格 -->
        <h2 class="section-title mb-3">
            <i class="far fa-images text-primary"></i> 相册照片
        </h2>
        <div class="photos-grid">
            <div class="photo-item" data-id="1" data-caption="清晨的海滩，宁静而美丽">
                <img src="https://picsum.photos/id/29/600/600" alt="清晨的海滩">
                <div class="photo-caption">清晨的海滩，宁静而美丽</div>
            </div>
            <div class="photo-item" data-id="2" data-caption="日落时分的海边，天空被染成金色">
                <img src="https://picsum.photos/id/30/600/600" alt="日落海景">
                <div class="photo-caption">日落时分的海边，天空被染成金色</div>
            </div>
            <div class="photo-item" data-id="3" data-caption="海浪拍打岸边的岩石，溅起白色的浪花">
                <img src="https://picsum.photos/id/31/600/600" alt="海浪照片">
                <div class="photo-caption">海浪拍打岸边的岩石，溅起白色的浪花</div>
            </div>
            <div class="photo-item" data-id="4" data-caption="沙滩上的足迹，很快就会被海浪抚平">
                <img src="https://picsum.photos/id/32/600/600" alt="沙滩足迹">
                <div class="photo-caption">沙滩上的足迹，很快就会被海浪抚平</div>
            </div>
            <div class="photo-item" data-id="5" data-caption="孩子们在沙滩上堆沙堡，玩得不亦乐乎">
                <img src="https://picsum.photos/id/42/600/600" alt="沙滩玩耍">
                <div class="photo-caption">孩子们在沙滩上堆沙堡，玩得不亦乐乎</div>
            </div>
            <div class="photo-item" data-id="6" data-caption="海边的岩石，见证了无数潮起潮落">
                <img src="https://picsum.photos/id/43/600/600" alt="海边岩石">
                <div class="photo-caption">海边的岩石，见证了无数潮起潮落</div>
            </div>
            <div class="photo-item" data-id="7" data-caption="远处的帆船，点缀在蓝色的海面上">
                <img src="https://picsum.photos/id/44/600/600" alt="海上帆船">
                <div class="photo-caption">远处的帆船，点缀在蓝色的海面上</div>
            </div>
            <div class="photo-item" data-id="8" data-caption="夜晚的海边，星空格外明亮">
                <img src="https://picsum.photos/id/26/600/600" alt="夜晚海边">
                <div class="photo-caption">夜晚的海边，星空格外明亮</div>
            </div>
        </div>
        
        <!-- 评论区 -->
        <div class="comments-section">
            <h2 class="section-title">
                <i class="far fa-comments text-primary"></i> 评论与留言
            </h2>
            
            <!-- 评论表单 -->
            <div class="comment-form">
                <div class="form-group">
                    <textarea class="comment-input" rows="3" placeholder="分享你的想法..."></textarea>
                </div>
                <div class="form-actions">
                    <button class="submit-comment">发布评论</button>
                </div>
            </div>
            
            <!-- 评论列表 -->
            <div class="comments-list">
                <!-- 评论1 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/65/100/100" alt="李华的头像" class="comment-avatar">
                        <span class="comment-author">李华</span>
                        <span class="comment-time">3天前</span>
                    </div>
                    <div class="comment-content">
                        <p>这组照片拍得太美了！特别是日落那张，色彩真的太惊艳了，请问用什么相机拍摄的？</p>
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i> 42
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </div>
                    </div>
                    
                    <!-- 回复表单 -->
                    <div class="reply-form">
                        <div class="form-group">
                            <textarea class="comment-input" rows="2" placeholder="回复 @李华..."></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="submit-comment">回复</button>
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/id/64/100/100" alt="陈明的头像" class="comment-avatar">
                                <span class="comment-author">陈明</span>
                                <span class="comment-time">2天前</span>
                            </div>
                            <div class="comment-content">
                                <p>谢谢喜欢！用的是索尼A7R4，搭配16-35mm F2.8镜头拍摄的。</p>
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-comment">
                                    <i class="far fa-heart"></i> 18
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-reply"></i> 回复
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论2 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/91/100/100" alt="王芳的头像" class="comment-avatar">
                        <span class="comment-author">王芳</span>
                        <span class="comment-time">1周前</span>
                    </div>
                    <div class="comment-content">
                        <p>好美的海边！请问这是哪个地方呀？看起来好适合度假，打算暑假也带家人去一次。</p>
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i> 27
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </div>
                    </div>
                    
                    <!-- 回复表单 -->
                    <div class="reply-form">
                        <div class="form-group">
                            <textarea class="comment-input" rows="2" placeholder="回复 @王芳..."></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="submit-comment">回复</button>
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <div class="comment-header">
                                <img src="https://picsum.photos/id/64/100/100" alt="陈明的头像" class="comment-avatar">
                                <span class="comment-author">陈明</span>
                                <span class="comment-time">6天前</span>
                            </div>
                            <div class="comment-content">
                                <p>这是青岛的金沙滩，确实很适合带家人去，海水很干净，沙滩也很细腻。</p>
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action like-comment">
                                    <i class="far fa-heart"></i> 9
                                </div>
                                <div class="comment-action reply-btn">
                                    <i class="far fa-reply"></i> 回复
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论3 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/id/25/100/100" alt="赵伟的头像" class="comment-avatar">
                        <span class="comment-author">赵伟</span>
                        <span class="comment-time">2周前</span>
                    </div>
                    <div class="comment-content">
                        <p>拍摄角度选得真好，尤其是海浪那张，动感十足！学习了</p>
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i> 31
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </div>
                    </div>
                    
                    <!-- 回复表单 -->
                    <div class="reply-form">
                        <div class="form-group">
                            <textarea class="comment-input" rows="2" placeholder="回复 @赵伟..."></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="submit-comment">回复</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 全屏图片查看器 -->
    <div class="fullscreen-viewer">
        <div class="viewer-content">
            <button class="viewer-close">
                <i class="fas fa-times"></i>
            </button>
            <img src="" alt="全屏查看的图片" class="fullscreen-image">
            <div class="viewer-caption"></div>
            <div class="viewer-nav">
                <button class="nav-btn prev-btn">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="nav-btn next-btn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有图片元素和查看器元素
            const photoItems = document.querySelectorAll('.photo-item');
            const fullscreenViewer = document.querySelector('.fullscreen-viewer');
            const fullscreenImage = document.querySelector('.fullscreen-image');
            const viewerCaption = document.querySelector('.viewer-caption');
            const viewerClose = document.querySelector('.viewer-close');
            const prevBtn = document.querySelector('.prev-btn');
            const nextBtn = document.querySelector('.next-btn');
            let currentPhotoIndex = 0;
            
            // 打开全屏查看器
            function openViewer(index) {
                currentPhotoIndex = index;
                const photo = photoItems[index];
                fullscreenImage.src = photo.querySelector('img').src;
                fullscreenImage.alt = photo.querySelector('img').alt;
                viewerCaption.textContent = photo.getAttribute('data-caption');
                fullscreenViewer.classList.add('active');
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            }
            
            // 关闭全屏查看器
            function closeViewer() {
                fullscreenViewer.classList.remove('active');
                document.body.style.overflow = ''; // 恢复背景滚动
            }
            
            // 查看上一张图片
            function showPrevPhoto() {
                currentPhotoIndex = (currentPhotoIndex - 1 + photoItems.length) % photoItems.length;
                openViewer(currentPhotoIndex);
            }
            
            // 查看下一张图片
            function showNextPhoto() {
                currentPhotoIndex = (currentPhotoIndex + 1) % photoItems.length;
                openViewer(currentPhotoIndex);
            }
            
            // 点击图片打开全屏查看器
            photoItems.forEach((item, index) => {
                item.addEventListener('click', () => {
                    openViewer(index);
                });
            });
            
            // 关闭查看器
            viewerClose.addEventListener('click', closeViewer);
            
            // 查看上一张/下一张
            prevBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                showPrevPhoto();
            });
            
            nextBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                showNextPhoto();
            });
            
            // 点击查看器背景关闭
            fullscreenViewer.addEventListener('click', (e) => {
                if (e.target === fullscreenViewer) {
                    closeViewer();
                }
            });
            
            // 键盘导航
            document.addEventListener('keydown', (e) => {
                if (!fullscreenViewer.classList.contains('active')) return;
                
                if (e.key === 'Escape') {
                    closeViewer();
                } else if (e.key === 'ArrowLeft') {
                    showPrevPhoto();
                } else if (e.key === 'ArrowRight') {
                    showNextPhoto();
                }
            });
            
            // 点赞功能
            const likeBtn = document.querySelector('.like-btn');
            likeBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                icon.classList.toggle('far');
                icon.classList.toggle('fas');
                
                if (icon.classList.contains('fas')) {
                    this.classList.add('bg-danger');
                } else {
                    this.classList.remove('bg-danger');
                }
            });
            
            // 收藏功能
            const bookmarkBtn = document.querySelector('.bookmark-btn');
            bookmarkBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                icon.classList.toggle('far');
                icon.classList.toggle('fas');
                
                if (icon.classList.contains('fas')) {
                    this.classList.add('bg-primary');
                    this.classList.add('text-white');
                } else {
                    this.classList.remove('bg-primary');
                    this.classList.remove('text-white');
                }
            });
            
            // 分享功能
            const shareBtn = document.querySelector('.share-btn');
            shareBtn.addEventListener('click', function() {
                alert('分享链接已复制到剪贴板！');
            });
            
            // 下载功能
            const downloadBtn = document.querySelector('.download-btn');
            downloadBtn.addEventListener('click', function() {
                alert('开始下载全部照片...');
            });
            
            // 评论回复功能
            const replyBtns = document.querySelectorAll('.reply-btn');
            replyBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const replyForm = this.closest('.comment-item').querySelector('.reply-form');
                    
                    // 关闭其他所有打开的回复表单
                    document.querySelectorAll('.reply-form').forEach(form => {
                        if (form !== replyForm) {
                            form.classList.remove('active');
                        }
                    });
                    
                    // 切换当前回复表单
                    replyForm.classList.toggle('active');
                    
                    // 如果打开了回复表单，自动聚焦到输入框
                    if (replyForm.classList.contains('active')) {
                        replyForm.querySelector('textarea').focus();
                    }
                });
            });
            
            // 评论点赞功能
            const likeCommentBtns = document.querySelectorAll('.like-comment');
            likeCommentBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countEl = this.childNodes[2];
                    let count = parseInt(countEl.textContent.trim());
                    
                    icon.classList.toggle('far');
                    icon.classList.toggle('fas');
                    
                    if (icon.classList.contains('fas')) {
                        this.classList.add('text-danger');
                        countEl.textContent = ` ${count + 1}`;
                    } else {
                        this.classList.remove('text-danger');
                        countEl.textContent = ` ${count - 1}`;
                    }
                });
            });
            
            // 提交评论
            const submitCommentBtns = document.querySelectorAll('.submit-comment');
            submitCommentBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const textarea = this.closest('.form-group, .reply-form').querySelector('textarea');
                    const commentText = textarea.value.trim();
                    
                    if (commentText) {
                        alert('评论已发布！');
                        textarea.value = '';
                        
                        // 如果是回复，提交后关闭回复框
                        if (this.closest('.reply-form')) {
                            this.closest('.reply-form').classList.remove('active');
                        }
                    } else {
                        alert('请输入评论内容');
                    }
                });
            });
        });
    </script>
</body>
</html>
    
